<template>
  <div class="dailyWaterStatistics">
    <div class="block">
      <span class="startDemonstration">
        <span class="demonstration">开始日期：</span>
        <el-date-picker
          class="el_inp"
          size="mini"
          :picker-options="pickerBeginDateBefore"
          v-model="value1"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
          @change="startDataChange"
        ></el-date-picker>
        <!-- x -->
      </span>
      <span class="endDemonstration">
        <span class="demonstration">结束日期：</span>
        <el-date-picker
          class="el_inp"
          size="mini"
          v-model="value2"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          clearable
          @change="endDataChange"
        ></el-date-picker>
      </span>
    </div>
    <!-- 日用水情况统计 柱状图 -->
    <!-- 日用水情况统计 -->
    <div
      ref="chart2"
      class="useWatermainEcharts"
      id="useWatermain"
      :style="{ height: `300px`, width: `100%` }"
    ></div>
  </div>
</template>

<script>
const echarts = require("echarts");
import {
  salesStatistics,
  flUseWaterYearWideTable,
} from "@/api/baseManage/flMaintain/index";
import {
  flWaterMeterRecordSearch,
  flNbTimeData,
  flWaterMeterRecordSearchDay,
} from "@/api/waterAnalysis/flWaterMeterRecord/index";
// flWaterMeterRecordSearch
export default {
  props: ["echartsData", "communityCode", "waterNo", "userCode"],
  name: "dailyWaterStatistics",
  data() {
    return {
      value1: this.getBeforeDate(7),
      value2: this.getBeforeDate(0),
      echarts: "",
      waterData: [],
      pickerBeginDateBefore: {
        disabledDate: (time) => {
          return time.getTime() > new Date().getTime();
        },
      },
    };
  },
  methods: {
    getBeforeDate(n) {
      var n = n;
      var d = new Date();
      var year = d.getFullYear();
      var mon = d.getMonth() + 1;
      var day = d.getDate();
      if (day <= n) {
        if (mon > 1) {
          mon = mon - 1;
        } else {
          year = year - 1;
          mon = 12;
        }
      }
      d.setDate(d.getDate() - n);
      year = d.getFullYear();
      mon = d.getMonth() + 1;
      day = d.getDate();
      let s =
        year +
        "-" +
        (mon < 10 ? "0" + mon : mon) +
        "-" +
        (day < 10 ? "0" + day : day) +
        " " +
        "00:00:00";
      return s;
    },

    createEcharts() {
      // 基于准备好的dom，初始化echarts实例
      this.echarts = echarts.init(document.getElementById("useWatermain"));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {
          // 触发类型触发类型：axis柱状图，折线图
          trigger: "axis",
          // 指示器类型
          axisPointer: {
            // 指示器类型 cross 十字准星指示器  line直线指示器
            type: "line",
            // 直线颜色
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          // 各工具配置项。
          feature: {
            // 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
            // dataView: {show: true, readOnly: false},
            // 动态类型切换 'line'（切换为折线图） 'bar'（切换为柱状图）
            // magicType: {show: true, type: ['line', 'bar']},
            // 开启配置项还原
            // restore: {show: true},
          },
        },
        legend: {
          data: ["用水量"],
        },
        xAxis: [
          {
            // 坐标轴类型
            type: "category",
            data: [],
            axisPointer: {
              // 阴影指示器
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            //  数值轴，适用于连续数据。
            type: "value",
            name: "水量(平方米)",
            min: 0,
            max: "dataMax",
            // 强制设置坐标轴分割间隔
            interval: 300,
            axisLabel: {
              formatter: "{value}",
            },
          },
          // {
          //     type: 'value',
          //     name: '',
          //     min: 0,
          //     max: 'dataMax',
          //     interval: 300,
          //     axisLabel: {
          //         formatter: ''
          //     }
          // }
        ],
        series: [
          {
            name: "用水量",
            // 格式  'line'（切换为折线图） 'bar'（切换为柱状图）
            type: "line",
            showBackground: true,
            data: this.waterData,
          },
          // {
          //     name: '水度',
          //     type: 'line',
          //     yAxisIndex: 1,
          //     data: this.waterData
          // }
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      this.echarts.setOption(option);
    },
    // 请求拿到数据
    getData() {
      let waterNo = this.waterNo;
      if (waterNo != "") {
        this.getWaterData();
      }
    },
    // 获取柱状图水量
    async getWaterData() {
      let readNumDate = this.value1;
      let lastNumDate = this.value2;

      if (readNumDate && lastNumDate) {
        if (new Date(readNumDate).getTime() > new Date(lastNumDate).getTime()) {
          this.$message({
            type: "warning",
            message: "开始日期不能小于结束日期",
          });
          return;
        }
        if (
          new Date(readNumDate).getTime() < new Date("2021-05-01 00:00:00").getTime() ||
          new Date(lastNumDate).getTime() < new Date("2021-05-01 00:00:00").getTime()
        ) {
          this.$message({
            type: "warning",
            message: "所选日期不能小于2021年5月1日 0时0分0秒",
          });
          return;
        }
      }

      let userCode = this.userCode;
      let waterNo = this.waterNo;
      let Obj = {};
      Obj.readNumDate = readNumDate;
      Obj.lastNumDate = lastNumDate;
      //Obj.userCode = userCode
      Obj.waterNo = waterNo;
      console.log(Obj, "参数55666");
      const resflWaterMeterRecordSearchs = await flWaterMeterRecordSearch(Obj);
      let resflWaterMeterRecordSearch = resflWaterMeterRecordSearchs.data;
      // const resflWaterMeterRecordSearch = await flWaterMeterRecordSearch()
      // const resflWaterMeterRecordSearch = await flWaterMeterRecordSearch()
      console.log(resflWaterMeterRecordSearch, 8888288);
      let dateList = [];
      let waterList = [];
      for (let i = 0; i < resflWaterMeterRecordSearch.length; i++) {
        const element = resflWaterMeterRecordSearch[i];
        waterList.push(element.useCount);
        // waterList.push(element.read_num)
        dateList.push(element.readNumDate);
        // dateList.push(element.read_num_date)
      }
      console.log(dateList, waterList, "canshuiiiqqqqqq");

      const dataAttribute = this.dataAttribute;
      let resArray = waterList;
      // let resArray =['0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0']
      // resArray = this.echartsData
      console.log(resArray, "用水量数据");
      if (waterNo === "") {
      }
      this.echarts.setOption({});
      this.echarts.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            crossStyle: {
              color: "#999",
            },
          },
        },
        xAxis: [
          {
            type: "category",
            data: dateList,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "水量(平方米)",
            min: 0,
            max: "dataMax",
            interval: 300,
            axisLabel: {
              formatter: "{value}",
            },
          },
          // {
          //     type: 'value',
          //     name: '',
          //     min: 0,
          //     max: 'dataMax',
          //     interval: 300,
          //     axisLabel: {
          //         formatter: ''
          //     }
          // }
        ],
        series: [
          {
            name: "用水量",
            type: "line",
            showBackground: true,
            data: resArray,
          },
          // {
          //     name: '水度',
          //     type: 'line',
          //     yAxisIndex: 1,
          //     data: waterDa
          // }
        ],
      });
    },
    startDataChange(newValue) {
      this.value1 = newValue;
      this.getWaterData();
    },
    endDataChange(newValue) {
      this.value2 = newValue;
      this.getWaterData();
    },
  },
  mounted() {
    this.createEcharts();
    // this.getWaterData()
    this.getData();
    window.onresize = () => {
      // 基于准备好的dom，初始化echarts实例
      var myChart2 = echarts.init(this.$refs.chart2);
      myChart2.resize();
    };
  },
  created() {
    // this.getWaterData()
  },
  watch: {
    userCode: {
      deep: true,
      handler(newValue, oldValue) {
        this.userCode = newValue;
      },
    },
    communityCode: {
      deep: true,
      handler(newValue, oldValue) {
        this.communityCode = newValue;
      },
    },
    waterNo: {
      deep: true,
      handler(newValue, oldValue) {
        this.waterNo = newValue;
      },
    },
  },
};
</script>

<style scoped lang="scss">
.dailyWaterStatistics {
  // overflow: hidden;
  .block {
    margin-left: 150px;
    margin-top: 20px;
    // height: 30px;
    // float: left;
    // z-index:999;
    .endDemonstration {
      margin-left: 20px;
    }
  }
  .useWatermainEcharts {
    margin-top: 30px;
    // margin-left: 60px;
  }
}
</style>
